<template>
	<div class="main-box main-page-cont-box">
		<Header class="main-header" />
        <div class="main-cont">
            <router-view></router-view>
        </div>
		<About />
		<Footer />

    </div>
</template>



<script setup>
    import { onBeforeMount, onMounted, onUnmounted  } from 'vue'
    import { throttle } from 'lodash'
	import { controlStore } from '@/stores/control'

    import Header from '@/components/Header.vue'
    import About from '@/components/About.vue'
    import Footer from '@/components/Footer.vue'

	let scrDebounce = null;

	const controlSto = controlStore();

	onBeforeMount(()=> {
        initDebounce();
    });

	onMounted(()=>{
		window.addEventListener('scroll', toScroll);
	});
	onUnmounted(()=>{
		window.removeEventListener('scroll', toScroll);
	});

	const initDebounce = () => {
        scrDebounce = throttle((e) => {
           doScroll(e);
        }, 600);
    };

	const toScroll = (e) => {
        scrDebounce && scrDebounce(e);
    };
	const doScroll = (e) => {
        controlSto.setOfftop(window.pageYOffset);
    };

   
</script>

<style lang="scss" scoped>
	.main-box {
		// min-width: 1400px;
		// overflow: auto;
		.main-header {
			position: -webkit-sticky;
			position: sticky;
			top: 0px;
			z-index: 9999;
		}
		.main-cont {
			min-height: calc(100vh - 250px);
		}
	}

	// .fade-enter-active, .fade-leave-active {
    //     transition: opacity 1.5s;
    // }

    // .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    //     opacity: 0;
    //     transition: opacity 1s;
    // }







	// .slide-vertical-leave-active {
	// 	transition: all 1s ease;
	// }
	// .slide-vertical-enter-active {
	// 	transition: all 1.5s ease;
	// }

	// .slide-vertical-enter {
	// 	transform: translateX(-100%);
	// }

	// .slide-vertical-leave-active {
	// 	transform: translateX(100%);
	// }
	
</style>
